<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title></title>
		<script src="./js/vue.js"></script>
		<script src="./js/utils.js"></script>
		<script src="./js/axios.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
				font-size: 6vw;
				box-sizing: border-box;/*不撑开盒子保证盒子原来大小*/
			}
			body {
				background-image: url(./back/back01.jpg);
				background-size: 100% 100%;
			}
			div {
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}
			.qizi {
				width: 11vw;
				height: 13vw;
				position: absolute;
				display: flex;
				border: 0.02rem solid #000;
				border-radius: 4px;
				cursor: pointer;
				box-shadow:-0.05rem 0.05rem 0.12rem 0.12rem rgb(255 255 255 / 32%) inset,
					-0.1rem 0.16rem 0.1rem rgb(0 0 0);
				background-size: 100% 100%;
				background-color: #FFFFCC;
			}
			.kacao {
				width: 82vw;
			    height: 19vw;
			    background-image: url(./back/ShovelBack.png);
			    background-size: 100% 100%;
			    padding: 2vh 3vh;
			}
			.kacaoqizi {
				width: 10vw;
				height: 12vw;
				border: 0.02rem solid #000;
				border-radius: 4px;
				cursor: pointer;
				background-size: 100% 100%;
				background-color: #FFFFCC;
			}
			.tanc {
				position: absolute;
				width: 100vw;
				height: 100vh;
				background-color: #FFFFCC5f;
				z-index: 9999;
				display: flex;
				align-items: center;
				justify-content: center;
				
			}
			.tandata {
				position: absolute;
				width: 80vw;
				height: 60vh;
				background-color: #FFFFCC;
				border-radius: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.kaishibut {
				margin: 1vh;
				height: 10vh;
				width: 90%;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 4px;
			}
			.gongneng {
				flex:1;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.gonengbut {
				height: 60%;transform: rotate(-90deg); 
			}
			.gonengbut:active {
				height: 55%;
			}
			.WGbut {
				pointer-events: none
			}
			.coubut {
				flex: 1 1 0%;
				width: 100%;
				margin: 1vh 2vh;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.coubut div {
				position: absolute;
				background: wheat;
				width: 86%;
				height: 75%;
				top: 0vh;
				border-radius: 5px;/*圆形*/
				display: flex;
			    box-shadow: 0vw 1vw 1vw rgb(0 0 0);
			    align-items: center;
			    justify-content: center;
			}
			.coubut div:active {
				top: 1vh;
				box-shadow: 0vw 0vw 0vw rgb(0 0 0);
			}
		</style>
	</head>
	<body>
		<div id="app" style="display: flex;flex-direction: column;">
			<div style=""></div>
			<div style="height: 5vh;display: flex;justify-content: center;align-items: center;">
				<div 
					style="position: absolute;left: 1vw;width: 14vw;height: 4vh;font-size: 4vw;display: flex;color: rgb(0, 0, 0);background-color: rgb(204, 204, 255);justify-content: center;align-items: center;"
					@click="agenYouXi"
				>
					重开
				</div> 
				羊了个熊
			</div>
			<div style="height: 65vh;margin:5vh 20vw;position: relative;">
				<div 
					v-for="(item,key,i) in chessmans"
					:key="key"
					class="qizi" 
					@click="dianji(item)"
					:style="`${item.wh};${item.display?'':'background-color: #424242;filter: grayscale(60%);'};
					z-index:${item.id};top:${item.top}vw;left:${item.left}vw;
					background-image: url(${item.backcolor});`"
				></div>
			</div>
			
			<div style="height: 20vh;display: flex;justify-content: center;align-items: center;position: relative;">
				<div style="display: flex;padding: 0 5vw;position: absolute;width: 100vw;height: 14vw;top: -7vw;">
					<div class="gongneng" v-show="WaiG[0]">
						<img @click="waiGuai(0)" class="gonengbut" src="./icon/移除.png" >
					</div>
					<div class="gongneng" v-show="WaiG[1]">
						<img @click="waiGuai(1)" class="gonengbut"  src="./icon/刷新.png" >
					</div>
					<div class="gongneng" v-show="WaiG[2]">
						<img @click="waiGuai(2)" class="gonengbut" src="./icon/炸弹.png" >
					</div>
				</div>
				<div class="kacao" style="">
					<img 
						v-for="(item,i) in kcmans"
						:key="i"
						class="kacaoqizi" 
						:src="`./img/dm${item.classify}.gif`" 
					>
				</div>
			</div>
			
			<!-- 弹窗 -->
			<div v-show="isPop.is" class="tanc">
				
				<div class="tandata" v-if="isPop.begin&&isPop.is">
					<div style="height: 10vh;display: flex;flex-direction: column;align-items: center; justify-content: center;">
						<div v-if="user.name!=null" style="font-size: 4vw;">尊敬的：<span style="font-family: STHupo;color: #FFCC99;font-size: 7vw;">{{user.name}}</span></div>困难等级
					</div>
					<div style="height: 10vh;"><img src="./img/dm3.gif" style="height: 10vh;"></div>
					<div @click="cgrade(0)" class="kaishibut" style="background-color: #FFCCCC;">手速第一</div>
					<div @click="cgrade(1)" class="kaishibut" style="background-color: #FFCC99;">又快又对</div>
					<div @click="cgrade(2)" class="kaishibut" style="background-color: #99CCCC;">过关就行</div>
				</div>
				<div class="tandata" v-if="isPop.zhuan&&isPop.is">
					<div style="flex: 5;display: flex;align-items: center;">
						<span :style="`color:${counumber.color};font-size: ${counumber.size}vw;`">{{counumber.number}}</span>
					</div>
					<div class="coubut">
						<div @click="coushu">开始</div>
					</div>
				</div>
				<div class="tandata" v-if="isPop.result&&isPop.is">
					<div style="flex:3;width: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
						<div style="flex:1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
							<div style="margin: 1vh 0;">{{result.makeBreak?'成功！':'失败！'}}</div>
							<div v-if="result.makeBreak"> 
								<span v-if="user.name!=undefined">{{user.name}}</span>
								<span v-else>我的</span>
								排名：{{otherresult.ranking}}
							</div>
						</div>
						<div style="flex:3;width: 80%;    display: flex; justify-content: center; align-items: center;">
							<img v-if="!result.makeBreak" src="./img/dm0.gif" style="height: 20vh;" />
							<img v-if="result.makeBreak" src="./img/dm1.gif" style="height: 20vh;" />
						</div>
						<div style="flex:2;display: flex;flex-direction: column;align-items: center;justify-content: center;">
							<div style="font-size: 4vw;">
								总用时：{{result.time/100}}秒&nbsp;本局得分：
								<span style="font-size: 4vw;color:#607D8B;">{{result.score}}</span> 
							</div>
							<div v-if="result.makeBreak">
								<div style="font-size: 4vw;">
									
									<div style="color: #b79292;font-size: 4vw;display: flex;justify-content: center;" 
										v-if="otherresult.topresult.name!=undefined"
									>
										{{otherresult.topresult.name}}
									</div>
									上一名用时：{{otherresult.topresult.time/100}}秒&nbsp;得分：
									<span style="font-size: 4vw;color:#607D8B;">{{otherresult.topresult.score}}</span> 
								</div>
								<hr>
								<div style="font-size: 4vw;">
									<div style="font-family: STHupo;color: #FFCC99;font-size: 5vw;display: flex;justify-content: center;" 
										v-if="otherresult.maxresult.name!=undefined"
									>
										{{otherresult.maxresult.name}}
									</div>
									最高总用时：{{otherresult.maxresult.time/100}}秒&nbsp;得分：
									<span style="font-size: 4vw;color:#607D8B;">{{otherresult.maxresult.score}}</span> 
								</div>
							</div>
							
							<a v-if="result.grade<2&&result.makeBreak" 
								@click="toNext()" 
								style="text-decoration:none;color: #99CCCC;"
							>下一关</a>
							<a v-if="!result.makeBreak" style="text-decoration:none;color: #99CCCC;" href="">重新开始</a>
							<br>
							<div style="width: 100%;display: flex;justify-content: space-between;">
								<span @click="agenYouXi" style="font-size: 5vw;">返回主页</span>
								<span @click="agenGrade" style="font-size: 5vw;">重新开始</span>
							</div>
							
						</div>
					</div>
				</div>
				
				<div class="tandata" style="z-index: 100;" v-if="isPop.guo3&&isPop.is&&user.name==undefined">
					<div style="flex:1;justify-content: center;display: flex;flex-direction: column;align-items: center;">
						<div>
							恭喜您成功通过第三关
						</div>
						<div>可以获取名字</div>
					</div>
					<div style="flex:1;"><img src="../WeiXin/Nui1/img/dm6.gif" style="height: 10vh;"></div>
					<div style="flex:1;display: flex;flex-direction: column;">
						<div style="font-size: 4vw;">名字确定后无法更改</div>
						<input 
							style="flex:1;text-align:center;" 
							maxlength="10" 
							minlength="3"
							type="text" 
							v-model="linsname">
						<div style="flex:2;justify-content: center;display: flex;align-items: center;">
							<div v-show="linsname.length>=3" @click="getName" style="background-color: ;">确认</div>
						</div>
						
					</div>
				</div>
			</div> 
		</div>
	</body>
</html>
<script>
	let pw=document.documentElement.clientWidth
	let ph=document.documentElement.clientHeight
	let imglen=3//图片数量
	let jishu=1//基数
	let maxqi//最大棋子数
	let qzdata=[];//各个棋子分配的个数
	let qwidth=11//棋子宽度
	let qheight=13//棋子高度
	let colors=['#607D8B','#8D6E63','#FF7043',
				'#FFCA28','#D4E157','#66BB6A','#E57373',
				'#26A69A','#AB47BC','#7E57C2','#42A5F5'];
	let seti;//音乐播放循环
	let timesetin;//时间定时跑
	let mv=new Vue({
		el: "#app",
		data:{
			isPop:{
				is:false,//总开关
				result:false,//游戏结束
				begin:false,//刚进入页面
				zhuan:false,//炸弹技能
				guo3:false,
			},
			user:{name:'',},
			otherresult:{
				topresult:{//上一名
					grade:0,//等级
					score:0,//得分
					time:0,//时间
				},
				maxresult:{//最高名次
					grade:0,//等级
					score:0,//得分
					time:0,//时间
				},
				name:'',
				ranking:0,
			},
			result:{//对局对象，
				makeBreak:false,//成败
				grade:0,//等级
				score:0,//得分
				time:0,//时间
			},
			counumber:{//炸弹技能，随机爆发
				number:0,
				color:'',
				size:10,
				but:true,
			},
			chessmans:[],//棋子对象集
			kcmans:[],//卡槽中的棋子
			WaiG:[true,true,true],//外挂使用次数
			tonextmusic:true,//音乐是否播放
			linsname:'',//临时名字
		},
		methods:{
			getName(){//获取名字
				console.log(this.linsname)
				this.linsname=this.HTMLEncode(this.linsname)
				let url =topUrl+'ResultCont';
				axios.get(url,{
					params:{keys:'setname',name:this.linsname,user:this.user}
				}).then((resp) => {
					console.log(resp.data)
					if(resp.data==1){
						this.user.name=this.linsname
						this.isPop.guo3=false
						this.music('./mp3/yes.mp3')
					}
					else if(resp.data==2) alert("改名字已存在!") 
					else {
						alert("获取名字失败!") 
						this.isPop.guo3=false
						this.music('./mp3/yes.mp3')
					}
				},(err)=>{
					this.isPop.guo3=false
					this.music('./mp3/yes.mp3')
				});
			},
			endYouXi(){//游戏结束
				clearInterval(timesetin)
				console.log("游戏结束！",this.result)
				if(this.result.makeBreak){
					this.result.score+=Math.max(
						Math.round(10+(Math.pow(100,this.result.grade))-this.result.time/100),0
					);
					axios.defaults.withCredentials = true
					let url =topUrl+'ResultCont';
					axios.get(url,{
						params:{keys:'result',result:JSON.stringify(this.result),user:this.user}
					}).then((resp) => {
						console.log(resp.data)
						this.otherresult=resp.data
						this.isPop.is=true;
						this.isPop.result=true
						if(this.result.grade==2) {
							this.isPop.guo3=true
							this.music('./mp3/setname1.mp3')
						}else {
							this.music('./mp3/yes.mp3')
						}
					},(err)=>{
						console.log(err);
						this.isPop.is=true;
						this.isPop.result=true
						this.music('./mp3/yes.mp3')
					});
				}else {
					this.isPop.is=true;
					this.isPop.result=true
					this.music('./mp3/yes.mp3')
				}
			},
			//HTML转义
			HTMLEncode(html) {
			    var temp = document.createElement("div");
			    (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
			    return  temp.innerHTML;
			},
			agenGrade(){//从新当前对局
				this.tonextmusic=false
				clearInterval(timesetin)
				let value=this.result.grade
				jishu=1//基数
				// clearInterval(seti)
				this.chessmans=[]
				this.kcmans=[]
				this.WaiG=[true,true,true];//外挂使用次数
				this.music('./mp3/xxput.mp3')
				imglen=value*3+3//图片数
				jishu+=value*3+2//基数
				this.result={//对局对象，
					makeBreak:false,//成败
					grade:value,//等级
					score:0,//得分
					time:0,//时间
				}
				this.inif()
			},
			agenYouXi(){//回到首页
				// clearInterval(seti)
				jishu=1//基数
				this.tonextmusic=false;
				this.isPop.is=true;
				this.isPop.result=false
				this.isPop.begin=true
				this.result.makeBreak=false
			},
			toNext(){//下一关
				jishu=1//基数
				this.tonextmusic=false;//不用再次播放音乐
				this.cgrade(this.result.grade+1)
			},
			coushu(){//第三个工具计算
				if(!this.counumber.but) return ;
				this.counumber.but=false;
				this.music('./mp3/xxput.mp3')
				this.music('./mp3/coujinag.mp3')
				for(let i=0;i<50;i++){
					setTimeout(()=>{
						this.counumber.size=Math.floor(Math.random()*10+10)
						this.counumber.number=Math.floor(Math.random()*4+2*this.result.grade+1)
						this.counumber.color=colors[Math.floor(Math.random()*colors.length)]
					},1000/i)
				}
				setTimeout(()=>{
					this.music('./mp3/zhong.mp3')
					this.isPop.zhuan=false
					this.isPop.is=false
					setTimeout(()=>{
						this.music('./mp3/baoza.wav')
						qzdata=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
						for(let i=0;i<this.chessmans.length;i++){
							qzdata[this.chessmans[i].classify]++
						}
						for(let i=0;i<this.counumber.number;i++){
							let img,st=0,n=100,k=0;
							for(k=0;k<qzdata.length;k++) if(qzdata[k]>=3) break;
							if(k==qzdata.length) break;
							let qzlen=qzdata.length;
							while(qzlen--){
								img=Math.floor(Math.random()*imglen);
								if(qzdata[img]!=0&&qzdata[img]>=3){
									qzdata[img]--;
									break;
								}
							}
							for(let j=this.chessmans.length-1;j>=0;j--){
								if(this.chessmans[j].classify==img){
									this.chessmans.splice(j,1);
									st++;
								}
								if(st>=3) {
									break;
									this.result.score+=3
								}
							}
						}
						this.showclearly()
					},1500)
				},3000)
			},
			waiGuai(value){//使用工具
				this.music('./mp3/xxput.mp3')
				if(!this.WaiG[value]) return ;
				this.WaiG[value]=false
				if(value==0){
					if(this.kcmans.length==0) {
						this.WaiG[value]=true
						return ;
					}
					let maxlist=Math.min(this.kcmans.length,3);
					let tt=this.kcmans.splice(0,maxlist);
					let nleft=0
					for(let i=0;i<tt.length;i++){
						tt[i].top=80
						tt[i].left=nleft
						nleft+=12
						this.chessmans.push(tt[i])
					}
				}else if(value==1){
					maxqi=this.chessmans.length
					qzdata=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
					for(let i=0;i<maxqi;i++){
						qzdata[this.chessmans[i].classify]++
					}
					this.chessmans=[]
					this.buJu()
					this.showclearly()
				}else {
					this.isPop.zhuan=true
					this.isPop.is=true
				}
			},
			buJu(){//布局
				let i=0;
				if(this.result.grade==2){
					let x, y,l=0,n=0,m=182;
					let myNums=myNum(182,0,182);
					for (y = 1.5; y > -1.5; y -= 0.1) {
						for (x = -1.5; x < 1.5; x += 0.05){
							let a = x * x + y * y - 1;
							if ((a * a * a - x * x * y * y * y) <= 0&&l%2==0&&l%3==1){
								let img;
								while(true){
									img=Math.floor(Math.random()*imglen);
									if(qzdata[img]!=0){
										qzdata[img]--;
										break;
									}
								}
								const man={id:i++,classify:img,top:y*30+30,left:x*40+25,
									display:true,backcolor:`./img/dm${img}.png`}
								this.chessmans.push(man)
							}
							l++
							if(maxqi==i) break;
						}
						if(maxqi==i) break;
					}
				}
				for(;i<maxqi;i++){
					let img;
					while(true){
						img=Math.floor(Math.random()*imglen);
						if(qzdata[img]!=0){
							qzdata[img]--;
							break;
						}
					}
					let leftran=Math.floor(Math.random()*60);
					let topran=Math.floor(Math.random()*50+10);
					const man={id:i,classify:img,top:topran,left:leftran,
						display:true,backcolor:`./img/dm${img}.png`}
					this.chessmans.push(man)
				}
			},
			inif(){//初始化
				maxqi=jishu*imglen*3//最大棋子数
				qzdata=[]//各个棋子分配的数
				for(let i=0;i<imglen;i++){
					qzdata[i]=maxqi/imglen
				}
				this.buJu()
				this.showclearly()
				this.isPop.is=false;
				this.isPop.result=false
				this.isPop.begin=false
				this.isPop.zhuan=false
				this.counumber.but=true
				this.counumber.number=0
				this.result.time=0
				clearInterval(timesetin)
				timesetin=setInterval(()=>{
					this.result.time++
				},10)
				if(this.tonextmusic){
					this.music('./mp3/backmp3.mp3')
					clearInterval(seti)
					seti=setInterval(()=>{
						this.music('./mp3/backmp3.mp3')
					},5*60*1000+8*1000)
				}
			},
			cgrade(value){//关卡选项
				clearInterval(timesetin)
				jishu=1//基数
				// clearInterval(seti)
				this.chessmans=[]
				this.kcmans=[]
				this.WaiG=[true,true,true];//外挂使用次数
				this.music('./mp3/xxput.mp3')
				imglen=value*3+3//图片数
				jishu+=value*3+2//基数
				this.result={//对局对象，
					makeBreak:false,//成败
					grade:value,//等级
					score:0,//得分
					time:0,//时间
				}
				this.inif()
			},
			dianji(value){//点击棋子
				this.music('./mp3/qzbut.wav')
				if(value.display){
					const delman=this.chessmans.filter((list) => list.id === value.id)
					this.chessmans=this.chessmans.filter((list) => list.id !== value.id)
					this.showclearly()
					this.kcmans.push(delman[0])
					this.kcshowc()
				}
			},
			kcshowc(){//卡槽内计算
				this.kcmans.sort((a,b)=>{ return a.classify-b.classify})//升序
				let kclen=this.kcmans.length
				if(kclen<3) return false;
				let t=3,cot=1;
				for(let i=0;i<kclen-1;i++){
					if(this.kcmans[i].classify==this.kcmans[i+1].classify) cot++;
					else cot=1;
					if(cot==3){
						this.music('./mp3/xiao.mp3')
						this.result.score=this.result.score+3
						let id=this.kcmans[i].classify
						this.kcmans=this.kcmans.filter((list) => list.classify !== id)
						if(this.chessmans.length<=0) {
							this.result.makeBreak=true
							this.endYouXi()
							return ;
						}
						break;
					}
				}
				if(this.kcmans.length>=7) {
					this.result.makeBreak=false
					this.music('./mp3/no.mp3')
					this.endYouXi()
					return ;
				}
			},
			showclearly(){//棋子上下层区分
				let len=this.chessmans.length
				for(let i=0;i<len;i++){
					this.chessmans[i].display=true
					for(let j=i+1;j<len;j++){
						if(this.jiaoji(
							this.chessmans[i].left,this.chessmans[i].top,
							qwidth,qheight,
							this.chessmans[j].left,this.chessmans[j].top,
							qwidth,qheight,
							)
						){
							this.chessmans[i].display=false
							break;
						}
					}
				}
			},
			music(mp3){
				const audio = document.createElement("audio");
				audio.src = mp3;
				audio.play();
			},
			jiaoji(l,t,w,h,l2,t2,w2,h2){//两个棋子之间时候有交集
				if (Math.abs((l2 + w2)-(w + l))+Math.abs(l2 - l)< (w + w2) &&
				    Math.abs((t2 + h2)-(h + t))+Math.abs(t2 - t)< (h + h2)) { 
				    return true;
				}else return false;
			}
		},
		mounted(){
			const fpPromise = new Promise((resolve, reject) => {
				const script = document.createElement('script')
				script.onload = resolve
				script.onerror = reject
				script.async = true
				script.src = './js/fp.min.js'
				document.head.appendChild(script)
			}).then(() => FingerprintJS.load())
			fpPromise.then(fp => fp.get()).then(result => {
				visitorId = result.visitorId//设备唯一id
				console.log(visitorId)
				let url =topUrl+'UserCont';
				axios.defaults.withCredentials = true
				axios.get(url,{
					params:{keys:'Login',phoneId:visitorId}
				}).then((resp) => {
					console.log(resp.data);
					if(resp.data.id!=undefined) {
						this.user=resp.data;
						console.log(this.user.name)
					}
					this.isPop.is=true;
					this.isPop.result=false
					this.isPop.begin=true
				},(err)=>{
					console.log(err);
					this.isPop.is=true;
					this.isPop.result=false
					this.isPop.begin=true
				});
				
			})
			// this.isPop.begin=false
			// this.isPop.result=true
		},
		beforeDestroy() {
			clearInterval(timesetin)
		    clearInterval(seti)
		},
	});			
</script>